<template>
    <!-- 最新地震速报信息 -->
    <div class="sub-content-info">
        <div class="title1" style="margin-top:80px;">最新预警事件</div>
        <div class="attend">
            <div style="display:flex; ">
                <div style="display:flex; width: 49%;">
                    <span class="attention-icon">
                        <img src="@/assets/img/late.png" alt="">
                    </span>
                    <span class="attention-title">预警时刻: <span
                            class="attention-num">{{ this.lastEEWDataDict['SendTime'] }}</span></span>
                </div>
                <div style="display:flex;  width: 49%;">
                    <span class="attention-icon">
                        <img src="@/assets/img/late.png" alt="">
                    </span>
                    <span class="attention-title">发震时刻: <span
                            class="attention-num">{{ this.lastEEWDataDict['Oritime'] }}</span></span>
                </div>

            </div>

            <div style="display:flex;">
                <div style="display:flex;  width: 49%;">
                    <span class="attention-icon">
                        <img src="@/assets/img/unattend.png" alt="">
                    </span>
                    <span class="attention-title">震中位置:<span
                            class="attention-num">{{ this.lastEEWDataDict['EqLocStr'] }}</span></span>
                </div>
                <div style="display:flex;  width: 49%;">
                    <span class="attention-icon" >
                        <img src="@/assets/img/unattend.png" alt="">
                    </span>
                    <span class="attention-title">震中地名:<span class="attention-num">
                            {{ this.lastEEWDataDict['Locname'] }}</span></span>
                </div>

            </div>
        </div>

        <div class="bottom">
            <div class="ul-box">
                <div class="li-content">
                    <p><span>提前预警(秒)</span></p>
                    <p><span>{{this.lastEEWDataDict['eew_time'] }}</span></p>
                    <div class="li-box">
                        <div class="box1">
                            <h5><span>地震震级</span></h5>
                            <div class="pic">
                                <img src="../../../assets/img/wc.png" alt="">
                                <span>{{ this.lastEEWDataDict['Magnitude'] }}级</span>
                            </div>
                        </div>
                        <div class="box2">
                            <h5><span>本地烈度</span></h5>
                            <div class="pic">
                                <img src="../../../assets/img/wc.png" alt="">
                                <span>{{this.lastEEWDataDict['local_intensity']}}度</span>
                            </div>
                        </div>
                        <div class="box3">
                            <h5><span>提前预警</span></h5>
                            <div class="pic">
                                <img src="../../../assets/img/wc.png" alt="">
                                <span>{{this.lastEEWDataDict['eew_time'] }}秒</span>
                            </div>
                        </div>
                        <div class="box4">
                            <h5><span>震中烈度</span></h5>
                            <div class="pic">
                                <img src="../../../assets/img/wc.png" alt="">
                                <span>{{ this.lastEEWDataDict['EpiIntensity'] }}度</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
</template>
<script>
export default {
    name: 'lastEEW1',
    props: {
        lastEEWDataDict: {
            type: Object,  //类型判断
            default: {}    //默认值
        }
    },
    data() {
        return {
        }
    },
    methods: {
    },
}
</script>
<style>
.sub-content-info .title1{
	font-family: SourceHanSansCN-Bold;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 1px;
	color: #b1eded;
	margin-top: 8px;
	background: url(@/assets/img/sub_title_bg.png);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 300px;
	height: 38px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.sub-content-info .subtitle {
    font-size: 14px;
    color: #b1eded;
    margin-bottom: 5px;
}

.sub-content-info .content {
    font-size: 16px;
    line-height: 34px;
    color: #ffffff;
    margin: 0 0;
}

.sub-content-info .unit {
    font-size: 14px;
    line-height: 28px;
    color: #b1eded;
}

.bottom {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.bottom .ul-box {
    width: 100%;
    height: 100%;
    margin: 0 1.5%;
    background: url(../../../assets/img/light-bg.png) no-repeat center bottom;
    background-size: auto;
    background-position: bottom;
    background-size: 70%;
    background-repeat: no-repeat;
}

.bottom .ul-box .li-content {
    opacity: 1;
    position: relative;
    width: 100%;
    height: 58%;
    background: url(../../../assets/img/bg.png) no-repeat center;
    background-size: auto;
    background-size: contain;
    overflow: hidden;
}

.bottom .ul-box .li-content p:nth-of-type(1) {
    margin-top: 8%;
}

.bottom .ul-box .li-content p {
    width: 100%;
    height: 20%;
    text-align: center;
    color: #fff;
    display: table;
}

.bottom .ul-box .li-content p span {
    display: table-cell;
    vertical-align: middle;
}

.bottom .ul-box .li-content p:nth-of-type(2) {
    font-family: electronicFont;
    color: red;
    font-size: 3.5rem;
}

.bottom .ul-box .li-content .li-box {
    position: absolute;
    width: 70%;
    height: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.bottom .ul-box .li-content .li-box .box1 {
    left: 0;
    top: 0;
}

.bottom .ul-box .li-content .li-box .box2 {
    right: 0;
    top: 0;
}

.bottom .ul-box .li-content .li-box .box3 {
    left: 0;
    bottom: 0;
}

.bottom .ul-box .li-content .li-box .box4 {
    right: 0;
    bottom: 0;
}

.bottom .ul-box .li-content .li-box .box1,
.bottom .ul-box .li-content .li-box .box2,
.bottom .ul-box .li-content .li-box .box3,
.bottom .ul-box .li-content .li-box .box4 {
    width: 23%;
    height: 50%;
    position: absolute;
}

.bottom .ul-box .li-content .li-box .box1 h5,
.bottom .ul-box .li-content .li-box .box2 h5,
.bottom .ul-box .li-content .li-box .box3 h5,
.bottom .ul-box .li-content .li-box .box4 h5 {
    height: 50%;
    color: #fff;
    font-size: 0.7rem;
    font-weight: normal;
    display: table;
}

.bottom .ul-box .li-content .li-box .box1 h5 span,
.bottom .ul-box .li-content .li-box .box2 h5 span,
.bottom .ul-box .li-content .li-box .box3 h5 span,
.bottom .ul-box .li-content .li-box .box4 h5 span {
    display: table-cell;
    vertical-align: middle;
}

.bottom .ul-box .li-content .li-box .box1 .pic,
.bottom .ul-box .li-content .li-box .box2 .pic,
.bottom .ul-box .li-content .li-box .box3 .pic,
.bottom .ul-box .li-content .li-box .box4 .pic {
    width: 100%;
    height: 50%;
    color: red;
    font-size: 1.2rem;
}

.bottom .ul-box .li-content .li-box .box1 .pic img,
.bottom .ul-box .li-content .li-box .box2 .pic img,
.bottom .ul-box .li-content .li-box .box3 .pic img,
.bottom .ul-box .li-content .li-box .box4 .pic img {
    width: 1rem;
    vertical-align: bottom;
    margin-right: 5%;
}

.attend {
    margin-bottom: 20px;
}

.attend .attention-icon img {
    width: 27px;
    height: 27px;
}

.attend .attention-title {
    font-size: 14px;
    color: #b1eded;
    line-height: 28px;
    margin-left: 1%;
}

.attend .attention-num {
    font-size: 14px;
    color: #ffffff;
    margin: 0 5px;
}

.attend .attention-person {
    color: #ffffff;
}

.sub-content-info .static {
    display: flex;
    align-items: center;
    margin-bottom: 15px
}

.sub-content-info .static img {
    width: 14px;
    height: 14px
}
</style>